<template>
  <div class="pwd">
    <div class="pwdbox">
      <input
        type="password"
        v-model="oldpass"
        id=""
        placeholder="请输入原始密码"
      />
      <input type="password" v-model="pass" id="" placeholder="请输入新密码" />
      <input
        type="password"
        v-model="repass"
        id=""
        placeholder="请再次确认新密码"
      />
      <button @click="save">保存修改</button>
    </div>
  </div>
</template>

<script>
import { passModi } from "../services/user.js";
import { removeToken } from "../utils/tools";
export default {
  methods: {
    data() {
      return {
        oldpass: "",
        pass: "",
        repass: "",
      };
    },
    save() {
      if (this.oldpass && this.pass === this.repass) {
        passModi({ password: this.pass, oldPassword: this.oldpass }).then(
          (res) => {
            this.oldpass = "";
            this.pass = "";
            this.repass = "";
            // 如果修改成功，就弹出提示信息，并且删除token 重新登陆
            if (res.code === 1) {
              removeToken();
              alert(res.msg);
              this.$router.push({
                name: "Login",
              });
            } else {
              alert("原始密码输入错误！");
            }
          }
        );
      } else {
        alert("请检查信息");
      }
    },
  },
};
</script>

<style scoped>
.pwdbox {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
  justify-content: space-around;
  align-items: center;
}
img {
  width: 40vw;
  border-radius: 50%;
  border: 1px solid black;
}
input {
  display: block;
  width: 95%;
  border: 1px solid black;
  height: 2rem;
}
button {
  width: 50%;
  height: 3rem;
  border-radius: 10px;
  background: pink;
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.5rem;
}
</style>